<template>
  <div class="hello">
    <h1>   一起学习   axios</h1>

  </div>
</template>

<script>
import axios from 'axios';
import queryString from 'queryString'

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
var HTTP = axios.create({
  baseURL:'http://106.12.14.210:7300/mock/5b6eedb05f7323fd536a9ebb/example/',
  timeout:1000,
  headers:{
    'custome-header':'miaov',
    'content-type':'application/x-www-form-urlencoded' //支持字符串拼接的形式 (miaov=ketang&name=dengwubo)
  },
  responseType:'json',
  transformRequest:[function (data) { // 发送之前可以对数据进行处理
    data.age=30
    return queryString.stringify(data);
  }],
  transformResponse:[function (data) { // 改变响应数据
    console.log('transformResponse')
    data.data.abc='miaov'
    return data
  }],
  validateStatus(status){  // 改变响应状态码
    console.log(status)
    return status;
  },
  cancelToken:source.token

});
export default {

  created(){
    HTTP.post("test-post",{
      miaov:'ketang',
      name:'dengwubo'
    })
      .then(res=>{
        console.log(res.data)
      }).catch(err=>{
       if(axios.isCancel(err)){
         console.log(err.message)
       }else{
         console.log(err)
       }
    })
    source.cancel('操作被用户取消了!')

  }

}
</script>






<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
